<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  #outer{
      width: 208px;
      padding: 10px 10px;
      background: #fff;
      overflow: hidden;
      margin: 10px auto;
  }
  #outer img{
      float: left;
      margin: 2px 2px 0 0 ;
  }
</style>
<body bgcolor="#000">
    <div id="outer">
        <div id="big">
            <img src="./image/big_1.jpg" alt="">
        </div>
        <img src="./image/small_1.jpg" alt="">
        <img src="./image/small_2.jpg" alt="">
        <img src="./image/small_3.jpg" alt="">
        <img class="clear" src="./image/small_4.jpg" alt="">
        <img src="./image/small_5.jpg" alt="">
        <img src="./image/small_6.jpg" alt="">
        <img src="./image/small_7.jpg" alt="">
        <img src="./image/small_8.jpg" alt="">
        <img src="./image/small_9.jpg" alt="">
        <img src="./image/small_10.jpg" alt="">
        <img src="./image/small_11.jpg" alt="">
    </div>
</body>
</html>
<script>
    var img=document.getElementById('outer').getElementsByTagName('img')
   for(var i=0;i<img.length;i++){
       console.log(i);
       img[i].index=i
       img[i].onmouseover=function(){
           img[0].src="./image/big_"+this.index+".jpg"
           console.log(img[0].src);
       }
   }
</script>